*{margin:0; padding: 0; box-sizing: border-box;}
*::before, *::after{box-sizing: border-box; }

@keyframes circle{0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } }

#app{
	display: flex; flex-direction: column; height: 100vh;
	position: relative;
	
}
.page{
	align-items:center;
	display: flex; flex-direction: column; height: 100vh; width: 100%;
	position: absolute;
	
}
.background{
	/* display: flex;
	 flex-direction: column;  */
	 height: 100vh;
	background: transparent url() no-repeat center;
	background-size: cover;
	filter: blur(20px);
	position: relative;
	width: 100wh;
}
.disc-container{position: relative; }
.disc-container .icon-wrapper{position: absolute; z-index: 1; display: flex; 
	justify-content: center; align-items: center;
	border: 1px solid white; height: 20vw; width: 20vw;
	border-radius: 50%; background: rgba(0,0,0,0.5);
}
.disc-container .icon {width: 10vw; fill: white;}
.disc-container .pointer{width: 24vw; position: absolute; left: 35vw; }
.disc-container .disc{display: flex; justify-content: center; align-items: center; margin-top: 18vw; }
.disc-container .ring{width: 72vw; } 
.disc-container .light{width: 72vw; position: absolute; }
.disc-container .cover{width: 44.5vw; position: absolute; border-radius: 50%;  
  animation: circle 20s infinite linear; 
  animation-play-state: paused;
}
.disc-container.playing .light,
.disc-container.playing .cover{
  animation-play-state: running;
}

.disc-container .icon-pause{display: none; }
.disc-container.playing .icon-pause{display: block; }
.disc-container.playing .icon-play{display: none; }

.song-description{
	flex-grow: 1;
	color: #AEABAC;
	text-align: center;
	line-height: 2;
	margin-top: 20px;
}
.song-description h1{
	color: white;
	font-size: 18px;
}
.song-description p{
	font-size: 14px;
	line-height: 24px;
}
.song-description .lines{
	transition: transform 0.3s;
}
.song-description .lyric{
	height: 72px;
	overflow: hidden;
}
.song-description p.active{
	color: white;
}

.page > .links{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #D43B32;
}
.page > .links > a{
	width: 38.5vw;
	margin: 1em;
	text-align: center;
	border: 1px solid #D43B32;
	background: transparent;
	padding: 1.5vw;
	color: inherit;
	text-decoration: none;
	border-radius: 1.3vw;
	letter-spacing: 1vw;
}
.page > .links > a.main{
	background: #D43B32;
	color: white;
}	